<template>
  <view class="password-reset-container">
    <view class="reset-card">
      <view class="form-group">
        <input
          v-model="username"
          class="input-field"
          type="text"
          placeholder="请输入您的账号"
        />

        <view class="picker-container">
          <picker @change="optionsChange" :value="index" :range="options">
            <view class="custom-picker">
              {{ options[index] || "请选择用户类型" }}
              <view class="picker-arrow">›</view>
            </view>
          </picker>
        </view>
      </view>

      <button class="reset-button" @tap="onResetPass">立即重置密码</button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      options: ["请选择登陆用户类型", "用户"],
      username: null,
      optionsValues: ["", "yonghu"],
      index: 0,
    };
  },
  onLoad() {
    this.styleChange();
  },
  methods: {
    async onResetPass() {
      if (this.username == undefined) {
        this.$utils.msg("请输入账号");
        return;
      }
      if (this.optionsValues[this.index] == "") {
        this.$utils.msg("请选择角色");
        return;
      }
      let res = await this.$api.resetPass(
        `${this.optionsValues[this.index]}`,
        this.username
      );
      this.$utils.msgBack("重置密码成功,原始密码为:123456");
    },
    optionsChange(e) {
      this.index = e.target.value;
    },
    styleChange() {
      this.$nextTick(() => {
        // document.querySelectorAll('.forget-yaoxianStyle .uni-yaoxianStyle-yaoxianStyle').forEach(el=>{
        //   el.style.backgroundColor = this.restPwFrom.content.yaoxianStyle.backgroundColor
        // })
      });
    },
  },
};
</script>
<style>
/* 保持设计系统一致性 */
.password-reset-container {
  min-height: 100vh;
  display: flex;
  align-items: center;
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  padding: 32rpx;
}

.reset-card {
  width: 100%;
  background: rgba(255, 255, 255, 0.98);
  border-radius: 24rpx;
  padding: 48rpx 32rpx;
  box-shadow: 0 8rpx 24rpx rgba(0,0,0,0.06);
  /* backdrop-filter: blur(10rpx); */
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 48rpx;
  margin-bottom: 64rpx;
}

.input-field {
  height: 96rpx;
  padding: 0 32rpx;
  background: #f8f9fa;
  border-radius: 12rpx;
  font-size: 30rpx;
  color: #2b2d42;
  transition: all 0.25s ease;
  border: 2rpx solid transparent;
}

.input-field:focus {
  background: #fff;
  border-color: #5470ff;
  box-shadow: 0 4rpx 16rpx rgba(84, 112, 255, 0.15);
}

.input-field::placeholder {
  color: #8d99ae;
}

.custom-picker {
  height: 96rpx;
  line-height: 96rpx;
  padding: 0 32rpx;
  background: #f8f9fa;
  border-radius: 12rpx;
  color: #2b2d42;
  font-size: 30rpx;
  position: relative;
  transition: all 0.25s ease;
}

.picker-arrow {
  position: absolute;
  right: 32rpx;
  color: #8d99ae;
  font-size: 36rpx;
  transform: rotate(90deg);
  transition: transform 0.2s;
}

.custom-picker:active {
  background: #fff;
  box-shadow: 0 4rpx 16rpx rgba(84, 112, 255, 0.1);
}

.reset-button {
  height: 96rpx;
  line-height: 96rpx;
  background: linear-gradient(135deg, #5470ff, #6c8eff);
  color: white;
  font-size: 32rpx;
  border-radius: 12rpx;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.reset-button:active {
  transform: scale(0.98);
  box-shadow: 0 4rpx 16rpx rgba(84, 112, 255, 0.3);
}

/* 微交互增强 */
.input-field:active,
.input-field:focus {
  transform: translateY(-2rpx);
}

.custom-picker:active .picker-arrow {
  transform: rotate(90deg) scale(0.9);
}
</style>